<template>
  <el-dialog
    v-model="visibleAdd"
    :title="`${isEdit ? '修改' : '新增'}`"
    width="50%"
    align-center
    class="public-dialog"
    @close="handleClose"
    draggable
    destroy-on-close
  >
    <div class="max-h-[65vh]">
      <el-form
        ref="formRef"
        label-position="top"
        :model="formValue"
        :rules="rules"
      >
        <div class="flex">
          <div class="flex-1 mr-[8px]">
            <el-form-item label="类型" prop="type">
              <el-select
                v-model="formValue.type"
                clearable
                placeholder="类型"
                style="width: 100%"
              >
                <el-option
                  v-for="item in btnOptions"
                  :key="item.value"
                  :label="item.lable"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </div>
          <div class="flex-1">
            <el-form-item label="名称" prop="name">
              <div class="flex w-[100%]">
                <el-input
                  v-model="formValue.name"
                  placeholder="请输入名称"
                  class="mr-[8px] flex-1"
                />
                <el-switch
                  v-model="formValue.status"
                  inline-prompt
                  active-text="启用"
                  inactive-text="禁用"
                />
              </div>
            </el-form-item>
          </div>
        </div>
        <div class="flex">
          <div class="flex-1 mr-[8px]">
            <el-form-item label="上级菜单">
              <el-cascader
              v-model="formValue.pid"
              :options="menuList"
              :props="cascaderProps" 
              filterable
              style="width: 100%"
              />
            </el-form-item>
          </div>
          <div class="flex-1 mr-[8px]">
            <el-form-item label="唯一标识">
              <el-input v-model="formValue.unique_key" placeholder="后端标识"/>
            </el-form-item>
          </div>
        </div>

        <div class="flex">
          <div class="flex-1 mr-[8px]">
            <el-form-item label="URL" prop="url">
              <el-input v-model="formValue.url" placeholder="请输入URL" />
            </el-form-item>
          </div>
          <div class="flex-1">
            <el-form-item label="排序" prop="sort">
              <el-input v-model="formValue.sort" placeholder="请填写正整数" />
            </el-form-item>
          </div>
        </div>

        <div class="flex">
          <div class="flex-1 mr-[8px]">
            <el-form-item label="菜单简称" prop="alias_name">
              <el-input v-model="formValue.alias_name" placeholder="请输入菜单简称" />
            </el-form-item>
          </div>
        </div>

        <el-form-item label="图标" prop="icon" class="block w100">
          <div class="iconSet">
            <div
              v-for="(item, index) in iconSet"
              :key="item"
              @click="iconChoise(item, index)"
              :class="
                iconActive === index || formValue.icon === item ? 'active' : ''
              "
            >
              <div>
                <span class="icon main-iconfont" :class="`icon-${item}_${iconActive === index || formValue.icon === item ?'selected':'normal'}`"></span>
                <p>{{ item }}</p>
              </div>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-button">
        <el-button :disabled="loading" @click="handleClose(false)"
          >取消</el-button
        >
        <el-button type="primary" :loading="loading" @click="handleSave"
          >保存</el-button
        >
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { iconSet, cascaderProps, btnOptions } from "../data.js";

import { getData, setData, create } from "../api/index.js";
const props = defineProps({
  id: { type: [String, Number], default: "" },
  modelValue: { type: Boolean, default: false },
  disabled: { type: Boolean, default: false },
  menuList: { type: Array, default: () => [] },
});
const visibleAdd = ref(false)
const emit = defineEmits([ "refresh", "close"]);
const formValue = ref({});
const loading = ref(false);
const isEdit = computed(() => {
  return !!props.id;
});
//表单校验验证
const rules = reactive({
  name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
  type: [{ required: true, message: "类型不能为空", trigger: "change" }],
});
const open = async(data) => {
  if (data?.id) {
   await getDetail(data.id);
   formValue.value.status = data?.menuStatus ? true : false;
   
  }else{
    formValue.value = {
      type: data?.type,
      status: true,
      url: data?.url,
    };
    formValue.value.pid = data?.pid
  }
  visibleAdd.value = true;
};
const getDetail = async (id) => {
  try {
    const { data } = await getData({ id });
    formValue.value = {
      ...data,
    };
    
  } catch (e) {
    console.error(e);
  }
};
const iconActive = ref(null);
const iconChoise = (item, index) => {
  if (formValue.value.icon === item.toLowerCase()) {
    formValue.value.icon = null;
    iconActive.value = null;
    return false;
  }
  formValue.value.icon = item.toLowerCase()+'_selected';
  iconActive.value = index;
};

const handleSave = async () => {
  try {
    await formRef.value.validate();
    loading.value = true;
    formValue.value.status = formValue.value.status ? 1 : 0;
    formValue.value.sort = Number(formValue.value?.sort||0);
    const { icon, name, pid, sort, status, type, url, id,unique_key,alias_name } = formValue.value;
    const params = {
      icon,
      name,
      pid,
      sort,
      status,
      type,
      url,
      id,
      unique_key,
      alias_name
    };
    if (isEdit.value) {
      await setData(params);
      ElMessage.success("修改成功");
    } else {
      await create(params);
      ElMessage.success("新增成功");
    }
    handleClose(true);
  } catch (e) {
  } finally {
    loading.value = false;
  }
};
const formRef = ref();
const handleClose = async (refresh) => {
  formValue.value = {};
  await nextTick();
  formRef.value.clearValidate();
  visibleAdd.value = false;
  emit("close");
  if (refresh) emit("refresh");
};

defineExpose({
  open
});

</script>

<style lang="scss" scoped>
.iconSet {
  border: 1px solid var(--base-border-color);
  width: 100%;
  border-radius: 5px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  cursor: pointer;
  & > div {
    height: 80px;
    text-align: center;
    border: 1px solid var(--base-border-color);
    border-top: none;
    border-left: none;
    display: flex;
    align-items: center;
    .icon {
      font-size: 24px;
    }
    & > div {
      margin: 0 auto;
    }
    svg {
      display: inline-block;
    }
    &.active {
      background: #ebf0fd;
      color: #3366f1;
    }
  }
}
</style>
